<template>
	<div class="cate-tab1 swiper">
		<ol class="swiper-wrapper">
			<li v-for="(list,index) in pages" :key='index' class="swiper-slide">
				<router-link to='/' v-for="item in list" :key="item.id">
					<img :src="item.imgURL" />
					<p>{{item.title}}</p>
					<p>{{item.msg}}</p>
					<p>￥{{item.price}}起<span>&nbsp;&nbsp;{{item.oldprice}}</span></p>
				</router-link>
			</li>
		</ol>
	</div>
</template>
<script>
	//1.引入vue周期函数
	import {onMounted} from 'vue'
	//2.引入swiper动态组件
	import Swiper ,{
		Autoplay,
		EffectCoverflow,
		EffectCube,
		Pagination
	} from 'swiper'
	//3.说明swiper组件应用配置
	Swiper.use([Autoplay,EffectCoverflow,EffectCube,Pagination])
	
	export default{
		name:'CategoryTabs1',
		data(){
			return{
				tab1List : [
					{id:1,imgURL:require('@/assets/img/tab1-1.jpg'),title:'广州-丽江 7天跟团游',msg:'含往返飞机票+6晚住宿',price:3493,oldprice:3888},
					{id:2,imgURL:require('@/assets/img/tab1-2.jpg'),title:'广州-稻城亚丁 5天跟团游',msg:'含往返飞机票+4晚住宿',price:5677,oldprice:5888},
					{id:3,imgURL:require('@/assets/img/tab1-3.jpg'),title:'广州-三亚 5天跟团游',msg:'含往返飞机票(含税)+4晚住宿',price:2500,oldprice:2688},
					{id:4,imgURL:require('@/assets/img/tab1-4.jpg'),title:'广州-桂林 9天跟团游',msg:'含单程飞机票单程火车票(含税)+8晚住宿',price:3493,oldprice:3888},
					{id:5,imgURL:require('@/assets/img/tab1-5.jpg'),title:'广州-四川 5天跟团游',msg:'特惠立减！宿国际超5星洲际酒店丨峨眉+乐山+都江堰+熊猫乐园丨赠川剧变脸火锅',price:2320,oldprice:2660},
					{id:6,imgURL:require('@/assets/img/tab1-6.jpg'),title:'广州-九寨沟 6天跟团游',msg:'自费成都+重庆麻辣双城记|峨眉山+乐山大佛+都江堰洪崖洞|船游夜览两江',price:2980,oldprice:3122},
					{id:7,imgURL:require('@/assets/img/tab1-7.jpg'),title:'广州-张家界 4天跟团游',msg:'精致小团｜沱江泛舟｜纯玩一价全含｜高档酒店｜张家界玻璃桥天门山玻璃桥凤凰4日',price:2255,oldprice:2668},
					{id:8,imgURL:require('@/assets/img/tab1-8.jpg'),title:'广州-银川 5天跟团游',msg:'塞上江南+大漠长河+千古绝唱+沙坡头+水洞沟+西夏王陵+北堡西部影城宁夏5日',price:3380,oldprice:4880},
				]
			}
		},
		computed:{
			pages(){
				let arr = [] //空数组，目的是：重组一个二维数组
				let num = 4 //每页条数
				//将原数组遍历
				this.tab1List.forEach( (item,index)=>{
					//i：每页的页码
					let i = Math.floor(index / num)
					//将计算的页码放入新数组内，作为下标：
					//判断该下标是否存在
					if(!arr[i]){
						//第一次出现
						arr[i] = []
						arr[i].push(item)
					}else{
						//已经出现过直接添加
						arr[i].push(item)
					}
				})
				return arr
			}
		},
		setup(){
			onMounted(	()=>{
				new Swiper('.cate-tab1',{
					slidesPerView:1
				})
			})
		}
	}
</script>

<style scoped>
.cate-tab1{
	height: 7.8rem;
	margin-left: 0.2rem;
}
.cate-tab1 ol{
	width: 100%;
	height: 90%;
}
.cate-tab1 ol li{
	width: 100%;
	height: 100%;
	float: left;
}
.cate-tab1 ol li img{
	width: 4.2rem;
	height: 2.5rem;
	border-radius: 0.3rem;
}
.cate-tab1 ol li a{
	width: 48%;
	float: left;
	padding-top: 0.3rem;
}
.cate-tab1 ol li a:nth-child(even){
	float: right;
	padding-top: 0.3rem;
}
.cate-tab1 ol li a p:nth-child(2){
	padding-top: 0.1rem;
} 
.cate-tab1 ol li a p:nth-child(3){
	padding-top: 0.1rem;
	color: gray;
} 
.cate-tab1 ol li a p:nth-child(4){
	padding-top: 0.1rem;
	color: orange;
	font-weight: bold;
}
.cate-tab1 ol li a p:nth-child(4) span{
	color: gray;
	font-weight: normal;
	text-decoration: line-through;
}
.cate-tab1 ol li p{
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
</style>
